<template>
  <h1 class="ht1">{{ ctit }}</h1>
  <input
    type="text"
    style="width: 120px;"
    v-model="ctit"
  >
  <button class="cbtn" @click="cAdd" @keydown.i="cAdd">子组件新增</button>
  <button class="cbtn" @click="cDel">子组件删除</button>
  <button class="cbtn" @click="hdlSetPinia" style="width:160px;font-size:22px;">set pinia</button>
  <button class="cbtn" @click="hdlGetPin" style="width:140px;font-size:22px;">get pinia</button>
  
</template>

<script setup>
import { ref, reactive, inject } from 'vue'
import { gStore } from '@/stores/index.js'
import * as ls from '@/utils/ls.js'

const gSte = gStore()

const ctit = defineModel('ctit')

let emit = defineEmits(['myAdd', 'myDel'])

function cAdd() {
  emit('myAdd', '新增(HomeBtx)')
}

function cDel() {
  emit('myDel', '删除(HomeBtx)')
}

function hdlGetPin() {
  console.log( 'num:', gSte.num )
}

function hdlSetPinia() {
  gSte.numPlus()
}

// 把属性暴露给父组件
defineExpose({
  cAdd,
})

</script>

<style lang="less" scoped>
a {
  color: #42b983;
}
button {
  user-select: none;
}
.ht1 {
  margin-bottom: 15px;
}
.cbtn {
  padding: 8px 15px;
  border-radius: 2px;
  border: 1px solid #ddd;
  cursor: pointer;
  margin: 0 8px;
  outline: none;
  /* background: #f5f5f5; */
  font-size: 14px;
  font-family: inherit;
}
</style>
